<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>月上生活馆</title>
    <link rel="stylesheet" href="https://ali-static.oss-cn-beijing.aliyuncs.com/layui/v2.4.5/css/layui.css">
    <link rel="stylesheet" href="{{ asset('css/layout.css') }}">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    @yield('style')
</head>

<body>
<div class="layui-fuild" style="padding: 0">
    <div class="header">
        <div class="logo">
            <h3>月上生活馆</h3>
        </div>
        <ul class="layui-nav">
            <li class="layui-nav-item">
                <a href="javascript:;">{{ authUsername() }}</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ route('admin.home') }}">后台地址</a>
                    </dd>
                    <dd>
                        <a href="{{ route('telescope') }}">监控面板</a>
                    </dd>
                    <dd>
                        <a class="logout">登出</a>
                        <form id="logout-form"
                              action="{{ route('logout') }}"
                              method="POST"
                              style="display: none;">
                            @csrf
                        </form>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-container" style="margin-top: 10px;min-height: 1000px">
        @yield('content')
    </div>
    <div class="footer">
        <span>{{ about('beian', '京ICP-1234567890') }}</span>
    </div>
</div>
<script src="https://ali-static.oss-cn-beijing.aliyuncs.com/layui/v2.4.5/layui.js"></script>
<script src="{{ asset('sdk/tim-im/tim-js.js') }}"></script>
<script src="{{ asset('sdk/tim-im/cos-js-sdk-v5.js') }}"></script>
<script>
    layui.use(['element', 'layim', 'layer'], function () {
        let $ = layui.$
            , layer = layui.layer
            , layim = layui.layim;

        // 登出
        $('.logout').on('click', function () {
            $('#logout-form').submit();
        });

        // Tim Ready start
        let tim = TIM.create({
            SDKAppID: '{{ config('tim.appid') }}'
        });
        // 注册组件
        tim.registerPlugin({'cos-js-sdk': COS});
        // 设置日志等级
        tim.setLogLevel(1);

        // 接收到消息
        tim.on(TIM.EVENT.SDK_READY, timReady);
        tim.on(TIM.EVENT.MESSAGE_RECEIVED, msgReceived);
        tim.on(TIM.EVENT.PROFILE_UPDATED, profileUpdated);
        tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, listUpdated);
        tim.on(TIM.EVENT.ERROR, error);
        tim.on(TIM.EVENT.KICKED_OUT, kickedOut);
        // Tim Ready End

        // layim Ready Start
        layim.on('sendMessage', sendMsg);
        // layim Ready End

        $.post('{{ route('tim') }}', {_token: '{{ csrf_token() }}'}, getSign);

        function getSign(r) {
            $.post('{{ route('tim.sign') }}', r.tim, function (sign) {
                tim.login({
                    userID: r.tim.userID,
                    userSig: sign
                }).then(function (imResponse) {
                    login(imResponse, r);
                }).catch(loginFailure);
            })
        }

        function login(im, r) {
            layer.msg('登录成功');
            layim.config({
                brief: false // 精简模式
                , init: {mine: r.me, friend: r.friend}
                , isgroup: false
                , min: true
                , title: '在线客服'
            });
        }

        function loginFailure(e) {
            layer.msg('请求失败了!', {icon: 2});
            console.warn('error:', e); // 登录失败的相关信息
        }

        // sdk 出现错误
        function error(event) {
            console.log(event);
            console.log('SDK 不好了');
            // layer.msg('SDK 出现错误, 请重新登录');
        }

        // sdk 准备好
        function timReady(event) {
            console.log('SDK 准备好了, 获取个人资料...');
            tim.getMyProfile().then(function (v) {
                console.log(v);
            }).catch(loginFailure);
            let me = layim.cache().mine;
            // 更新个人资料到 Tim
            tim.updateMyProfile({
                nick: me.username,
                avatar: me.avatar,
                selfSignature: me.sign,
            }).then(function (imResponse) {
                console.log(imResponse.data); // 更新资料成功
            }).catch(function (imError) {
                console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
            });
        }

        // 资料更新
        function profileUpdated(event) {
            console.log('资料更新');
            console.log(event.data);
        }

        // 列表更新
        function listUpdated(event) {
            console.log('会话列表更新');
        }

        // 收到信息
        function msgReceived(e) {
            console.log('收到消息');
            let data = e.data[0];
            console.log(data);
            let msg = {
                username: data.from // 消息来源用户名
                , name: data.from
                , avatar: "https://ali-static.oss-cn-beijing.aliyuncs.com/default.png" // 消息来源用户头像
                , id: data.from // 消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
                , type: "friend" // 聊天窗口来源类型，从发送消息传递的to里面获取
                , content: data.payload.text //消息内容
                , cid: data.ID // 消息id，可不传。除非你要对消息进行一些操作（如撤回）
                , mine: false // 是否我发送的消息，如果为true，则会显示在右方
                , fromid: data.from // 消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
                , timestamp: data.time * 1000 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
            };
            layim.getMessage(msg);
        }

        // 被动登出
        function kickedOut() {
            console.log('被动登出');
            layer.msg('账号已在别处登录, 如非本人操作请及时修改密码!', {time: 3000, icon: 2}, function () {
                $('#logout-form').submit();
            });
        }

        // 发送信息
        function sendMsg(r) {
            let msg = tim.createTextMessage({
                to: r.to.id,
                conversationType: TIM.TYPES.CONV_C2C,
                payload: {
                    text: r.mine.content,
                }
            });
            tim.sendMessage(msg).then(function (imResponse) {
                // 发送成功
                console.log(imResponse);
            }).catch(function (imError) {
                // 发送失败
                console.warn('sendMessage error:', imError);
            });
        }
    });
</script>
@yield('script')
</body>
</html>
